<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
    <!-- <link rel="stylesheet" href="style.css" /> -->
    <style>
      /* Global Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

/* Header Styles */

.header {
  height: 100vh;
  /* background-image: url('https://p.ipic.vip/jllngg.png'); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.logo img {
  width: 100px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  width: 30%;
}

.nav-links li a {
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-links li a:hover {
  color: #f1c40f;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px;
  transition: all 0.3s ease;
}

.hero {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 30px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.btn {
  background-color: #f1c40f;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #fff;
  color: #f1c40f;
}

/* Services Styles */

.services {
  padding: 80px 0;
  text-align: center;
}

.services h2 {
  font-size: 2.5rem;
  margin-bottom: 50px;
}

.service {
  margin-bottom: 50px;
}

.service i {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #f1c40f;
}

.service h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.service p {
  font-size: 1.2rem;
}

/* About Us Styles

    </style>
  </head>
  <body>
    <header class="header">
      <nav class="navbar">
        <div class="logo">
          <a href="#"
            ><img src="https://i.imgur.com/Zy6P7f6.png" alt="Logo"
          /></a>
        </div>
        <ul class="nav-links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>
      <div class="hero">
        <h1>Welcome to My Website</h1>
        <p>
          We are a team of experienced professionals, committed to providing the
          highest quality services and products to our clients.
        </p>
        <button class="btn">Learn More</button>
      </div>
    </header>
    <section class="services">
      <h2>Our Services</h2>
      <div class="service">
        <i class="fa fa-paint-brush"></i>
        <h3>Web Design</h3>
        <p>
          We create beautiful and functional websites that help businesses
          succeed online.
        </p>
      </div>
      <div class="service">
        <i class="fa fa-code"></i>
        <h3>Web Development</h3>
        <p>
          We build custom web applications that meet the unique needs of our
          clients.
        </p>
      </div>
      <div class="service">
        <i class="fa fa-mobile"></i>
        <h3>Mobile App Development</h3>
        <p>
          We develop mobile apps that provide users with engaging and intuitive
          experiences.
        </p>
      </div>
    </section>
    <section class="about">
      <div class="about-text">
        <h2>About Us</h2>
        <p>
          We are a team of highly skilled professionals with years of experience
          in web development, mobile app development, and digital marketing. We
          are committed to providing our clients with the highest quality
          services and products, and we strive to exceed their expectations at
          every opportunity.
        </p>
      </div>
      <div class="about-img">
        <img src="https://i.imgur.com/ywv52eJ.jpg" alt="Team" />
      </div>
    </section>
    <section class="contact">
      <h2>Contact Us</h2>
      <form action="#" method="POST">
        <div class="form-group">
          <input type="text" name="name" placeholder="Name" required />
        </div>
        <div class="form-group">
          <input type="email" name="email" placeholder="Email" required />
        </div>
        <div class="form-group">
          <textarea name="message" placeholder="Message" required></textarea>
        </div>
        <button class="btn" type="submit">Send</button>
      </form>
    </section>
    <footer class="footer">
      <div class="footer-links">
        <ul>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Terms and Conditions</a></li>
        </ul>
      </div>
      <div class="social-media">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
      </div>
      <div class="copy">
        <p>&copy; 2023 My Website. All Rights Reserved.</p>
      </div>
    </footer>
  </body>
</html>
